<!--
 * @Author: Qinyonglian
 * @Date: 2019-08-16 09:28:18
 * @LastEditors: qinyonglian
 * @LastEditTime: 2020-09-28 15:53:01
 -->
<style>
.je-user-photo-parent {
  float: left;
  margin-top: 5px !important;
  margin-right: 5px !important;
}
.je-user-photo-parent .je-user-photo.photo-text,
.je-user-photo-parent .je-user-photo.photo-img {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
// @import "./../styles/common.scss";
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree {
  width: 260px;
  .tree-node-div {
    position: relative;
    padding-left: 15px;
    line-height: 29px;
    cursor: pointer;
    .verline {
      vertical-align: middle;
    }
    .nameDivOver {
      display: inline-block;
      width: 150px;
      overflow-y: auto;
      vertical-align: middle;
      overflow-x: auto;
    }
    .node-parent-close {
      transform: rotate(270deg);
      width: 7px;
      height: 3px;
      position: absolute;
      top: 13px;
    }
    .name-overflow {
      display: inline-block;
      vertical-align: middle;
      // overflow-x: auto;
      white-space: nowrap;
    }
    ::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      /* 或者这样
        width: 0;
        height: 0;
        */
    }
    .node-parent-open {
      width: 7px;
      height: 3px;
      position: absolute;
      top: 13px;
    }
    .node-color {
      color: rgba(0, 0, 0, 0.8);
      width: 90%;
    }
    .node-size {
      width: 90%;
      background: rgba(241, 239, 239, 1) !important;
      color: rgba(56, 107, 208, 1) !important;
    }
    .icon-folder-open-1 {
      color: rgba(252, 179, 63, 1);
    }
    .icon-folder,
    .icon-folder-open-1 {
      margin-left: 12px;
    }
    .icon-folder {
      font-size: 12px;
      // color: #dad8d8;
      color: rgba(252, 179, 63, 1);
    }
  }
  .tree-node-active {
    background: #ededed;
  }
}

// [v-cloak] {
//   display: none !important;
// }
</style>
<template>
  <ul
    :style="widthDialog == '100%'?'width: 100%':''"
    class="tree"
  >
    <li
      v-for="(item,index) of list"
      :key="index"
      class="tree-node-div"
    >
      <div
        @click="handleToggle(item, index)"
        :class="[nodeId == item.nodeId ? 'node-size' : 'node-color']"
      >
        <template>
          <img
            :class="[item.open?'node-parent-open':'node-parent-close']"
            src="./../assets/tree-node.png"
          >
          <span
            :class="[item.open?'fe icon-folder-open-1':'fe icon-folder']"
            class="verline"
          />
        </template>
        <div
          :style="widthDialog == '100%'?'width: 90%':''"
          class="nameDivOver"
        >
          <span class="name-overflow">{{ item.name }}</span>
        </div>
      </div>

      <template v-show="item.open && item.children.length > 0">
        <Tree
          :widthDialog="widthDialog"
          :child-list="item.children"
        />
      </template>
    </li>
  </ul>
</template>
<script>
import { EventBus } from '../common/eventBus';
import List from '../controllers/list/listController';

export default {
  name: 'Tree',
  props: {
    childList: {
      type: Array,
      required: true,
    },
    widthDialog: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      List: new List(),
      nodeId: '',
    };
  },
  computed: {
    list() {
      return this.childList;
    },
  },
  watch: {
  },
  mounted() {
    EventBus.$on('NOW_OBJ', (target) => {
      this.nodeId = target.obj.nodeId;
    });
    // EventBus.$on('SLIDE_TREE', (target) => {
    //   this.handleToggle(target);
    // });
  },
  beforeDestroy() {
    // EventBus.$off('NOW_OBJ');
  },
  methods: {
    // 点击
    async handleToggle(item) {
      this.$set(item, 'open', !item.open);
      EventBus.$emit('NOW_OBJ', { obj: item, source: item.source });

      if (!item.open) {
        this.$set(item, 'children', []);
        return false;
      }
      const param = {
        diskType: item.diskType,
        order: JSON.stringify([{ code: 'time', type: 'desc' }]),
        nodeType: 'dir',
        parentId: item.nodeId,
        tag: '',
        suffix: '',
        key: item.key || '',
      };
      const res = await this.List.initList(param) || [];
      if (!res.length) {
        this.$set(item, 'children', []);
        return false;
      }

      const newList = res.map(resItem => ({
        ...resItem,
        open: false,
        source: item.source,
      }));
      this.$set(item, 'children', newList);
    },
  },
};
</script>
